<template>
  <view style="padding-bottom: 54px;">
    <div class="lxCenterR" style="width: 100vw;height: 30vw;">
      <image src="https://ht-help.oss-cn-guangzhou.aliyuncs.com/static/logo.png" mode="aspectFit"
        style="width: 50vw;height: 10vw;" />
    </div>
    <up-collapse>
      <up-collapse-item :border="false">
        <template #title>
          <text style="color: #303133;font-size: 16px;">售后答疑</text>
        </template>
        <div v-for="(item, index) in questions" :key="index" class="question-box">
          <div class="question-name">{{ item.name }}</div>
          <image :src="item.cover" class="cover" mode="aspectFit" />
          <image :src="playIcon" class="cover" mode="aspectFit" @click="play(item)" />
        </div>
      </up-collapse-item>
      <up-collapse-item :border="false">
        <template #title>
          <text style="color: #303133;font-size: 16px;">安装视频</text>
        </template>
        <view>
          <up-grid :border="true">
            <up-grid-item v-for="(baseListItem, ii) in baseList" :key="ii" @click="openSeries(ii)">
              <image :src="baseListItem.name" mode="aspectFit" class="small-image" style="margin-top: 10px;" />
              <text style="margin-top: 10px;margin-bottom: 10px;font-size: 15px;">{{ baseListItem.title }}</text>
            </up-grid-item>
          </up-grid>
        </view>
      </up-collapse-item>
      <up-collapse-item :border="false">
        <template #title>
          <text style="color: #303133;font-size: 16px;">关于豪蒂</text>
        </template>
        <div class="lxCenterColumn">
          <div v-html="content"></div>
          <div class="lxCenterRow" style="margin-top: 8px;">
            <div class="lxCenterRow">
              <span>咨询帮助：</span>
              <span @click="call1" style="color: #63a5f9;">18928320548</span>
            </div>
            <div style="width: 20px;"></div>
            <div class="lxCenterRow">
              <span>意见反馈：</span>
              <span @click="call2" style="color: #63a5f9;">18933282380</span>
            </div>
          </div>
        </div>
      </up-collapse-item>
    </up-collapse>
    <video v-if="showVideo" :src="currentVideoUrl" objectFit="contain" class="videoPlayer" autoplay></video>
    <view v-if="showVideo" class="closeVideo lxCenterC" @click="stopVideo">
      <image src="https://ht-help.oss-cn-guangzhou.aliyuncs.com/static/closeVideo.png"
        style="width: 80rpx; height: 80rpx">
      </image>
    </view>
    <view class="lxCenterR bottom-beian">
      <a href="https://beian.miit.gov.cn/" target="_blank" style="color: rgb(48, 49, 51);">粤ICP备2023056674号-1</a>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      baseList: [
        {
          name: 'https://ht-help.oss-cn-guangzhou.aliyuncs.com/static/xyd.jpg',
          title: '小夜灯'
        },
        {
          name: 'https://ht-help.oss-cn-guangzhou.aliyuncs.com/static/td8-12.jpg',
          title: '8-13寸台灯'
        },
        {
          name: 'https://ht-help.oss-cn-guangzhou.aliyuncs.com/static/td14-22.jpg',
          title: '14-22寸台灯'
        },
        {
          name: 'https://ht-help.oss-cn-guangzhou.aliyuncs.com/static/ldd16-28.jpg',
          title: '16-28寸落地灯'
        },
        {
          name: 'https://ht-help.oss-cn-guangzhou.aliyuncs.com/static/zmldd.jpg',
          title: '子母落地灯'
        },
        {
          name: 'https://ht-help.oss-cn-guangzhou.aliyuncs.com/static/ctd.jpg',
          title: '朝天灯'
        },
        {
          name: 'https://ht-help.oss-cn-guangzhou.aliyuncs.com/static/zdd.jpg',
          title: '正吊灯'
        },
        {
          name: 'https://ht-help.oss-cn-guangzhou.aliyuncs.com/static/dtdd.jpg',
          title: '多头吊灯'
        },
        {
          name: 'https://ht-help.oss-cn-guangzhou.aliyuncs.com/static/kzdd.jpg',
          title: '开枝吊灯'
        },
        {
          name: 'https://ht-help.oss-cn-guangzhou.aliyuncs.com/static/fdd7-22.jpg',
          title: '7-22寸反吊灯'
        },
        {
          name: 'https://ht-help.oss-cn-guangzhou.aliyuncs.com/static/yxxdd.jpg',
          title: '圆形吸顶灯'
        },
        {
          name: 'https://ht-help.oss-cn-guangzhou.aliyuncs.com/static/fxxdd.jpg',
          title: '方形吸顶灯'
        },
      ],
      showVideo: false,
      playIcon: 'https://ht-help.oss-cn-guangzhou.aliyuncs.com/play-icon.png',
      currentVideoUrl: '',
      questions: [],
      content: `&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp豪蒂灯饰有限公司成立于2013年，位于惠州仲恺高新区惠风东一路19号艾瑞克斯科技产业园，经营范围包括灯饰产品及配件、工艺品的生产与销售等。<br><br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp20世纪90年代，一批海外留学的台湾人，在领略了蒂凡尼的艺术魅力和市场前景后，将这种独特的制作工艺引入中国，最早落户于广东惠州一带，他们在此投资建厂，培训学徒，促使蒂凡尼的艺术文化在中国内地生根发芽，并不断发展壮大，最终形成了一套完整的产业链。目前，全球95%的蒂凡尼灯具都产于中国，由此出口至世界各地。豪蒂品牌也因此孕育而生。<br><br>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp遇见豪蒂，感受纯手工古典艺术的传承。豪蒂灯饰不仅怀旧仿古，洋溢着西方古典奢华之美，设计方面更擅于突破传统，中西合璧，既融入古老的欧式宫廷情愫，又凝结着东方审美的艺术精髓，展示出“艺术无国界，时尚与古典和谐共生”的思想。不仅如此，豪蒂从大自然中汲取灵感，用艺术手法还原生活的美态，色彩的美学配合抽象的图案最能够体现它的特质。`,
    }
  },

  onLoad() {
    this.getQuestions()
  },

  methods: {
    play(item) {
      console.log('item :', '⭕️', JSON.stringify(item, null, 2));
      // window.open(item.video, '_blank');
      this.currentVideoUrl = item.video
      this.showVideo = true
    },
    stopVideo() {
      this.showVideo = false
    },
    getQuestions() {
      uni.request({
        url: 'https://www.insist.life:9999/help/questions',
        success: (res) => {
          const data = res.data.data || []
          console.log('data :', '⭕️', JSON.stringify(data, null, 2));
          this.questions = data
        },
      })
    },
    call1() {
      uni.makePhoneCall({
        phoneNumber: '18928320548'
      })
    },
    call2() {
      uni.makePhoneCall({
        phoneNumber: '18933282380'
      })
    },
    openSeries(ii) {
      uni.navigateTo({
        url: `/pages/s/s?i=${ii + 1}`,
      })
    }
  },
}
</script>

<style>
.question-box {
  margin-left: 1vw;
  position: relative;
  padding-bottom: 43vw;
  margin-top: 1vw;

  .question-name {
    height: 6vw;
    font-size: 15px;
  }

  .cover {
    position: absolute;
    width: 90vw;
    height: 40vw;
    top: 7vw;
    left: 0;
  }
}

.videoPlayer {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0rpx;
  left: 0rpx;
  z-index: 99998;
}

.closeVideo {
  width: 100rpx;
  height: 100rpx;
  position: fixed;
  top: 20rpx;
  right: 10rpx;
  z-index: 99999;
}

.small-image {
  width: 66px;
  height: 66px;
  margin-top: 8px;
}

.bottom-beian {
  position: fixed;
  bottom: 20px;
  width: 100vw;
  color: rgb(48, 49, 51);
  font-size: 14px;
}
</style>
